<template>
  <a-modal
    :visible='visible'
    :confirmLoading='confirmLoading'
    :destroyOnClose='true'
    :footer='true'
    @cancel='visible=false'
  >
    <div style='display: flex;justify-content: center;height: 450px;align-items: center'>
      <div style='text-align: center'>
        <div style='font-weight: bold;font-size: 20px;color: #000'>三众合信财税电子合同</div>
        <div ref='qrcode'></div>
        <div style='color: #000'>请使用手机扫描上方二维码完成签订</div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import QRCode from 'qrcode'

export default {
  components: {},
  data() {
    return {
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false
    }
  },
  methods: {
    // 显示对话框
    open(url) {
      this.visible = true
      this.$nextTick(() => {
        this.generateQRCode(url)
      })
    },
    generateQRCode(data) {
      const that = this
      QRCode.toCanvas(data, { width: 220, errorCorrectionLevel: 'H' }, (error, canvas) => {
        if (error) {
          console.log(error)
          return
        }
        console.log(canvas)
        that.$refs.qrcode.appendChild(canvas)
      })
    }

  }
}

</script>
<style scoped lang='less'>

</style>
